<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <script src="js/velocity.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" placeholder="请输入查找的内容" v-model="query" />
            <!--  -->
            <fade-component :query="query" :items="items">
                <li v-for="(item,index) in ComputedList" :key="item.msg" :data-index="index">
                    {{item.msg}}
                </li>
            </fade-component>
            <div>不符合查询匹配关键词的选项：</div>
            <fade-component>
                <li v-for="(item,index) in otherList" :key="item.msg" :data-index="index">
                    {{item.msg}}
                </li>
            </fade-component>
        </div>
        <template id="temp">
            <transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave">
                <slot></slot>
            </transition-group>
        </template>
        <script>
            Vue.component('fadeComponent',{
                props:['query','items'],
                template:'#temp',
                methods : {
                    beforeEnter(el){
                        el.style.opacity = 0;
                        el.style.height = 0;
                    },
                    enter(el,done) {
                        var delay = el.dataset.index * 150;
                        setTimeout(function(){
                            Velocity(el,{opacity:1,height:'1.6em'},{ complete:done })
                        },delay);
                    },
                    leave(el,done) {
                        var delay = el.dataset.index * 150;
                        setTimeout(function(){
                            Velocity(el,{opacity:0,height:0},{ complete:done })
                        },delay);
                    }
                }
            });

            var vm = new Vue({
                el:'#app',
                data : {
                    query:'',
                    items : [
                        { msg : '张三' },
                        { msg : '李四' },
                        { msg : '张芳芳' },
                        { msg : '王琳琳' },
                        { msg : '冯圆' },
                    ]
                },
                computed : {
                    ComputedList() {
                        var nameList = this.items;
                        var vm = this.query;
                        return nameList.filter(function(item){
                            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
                        })
                    },
                    otherList() {
                        var nameList = this.items;
                        var vm = this.query;
                        return nameList.filter(function(item){
                            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) === -1
                        })
                    }
                }
            });
        </script>
    </body>
</html>